<template>
    <div>
        <div class="conten">
            <div class="tuceng0" v-show="bimgshow">
                <div class="tuceng">
                    <div class="mess">
                        <div>隐患问题:{{ mess }}</div>
                        <div>整改说明:{{ zgmess }}</div>
                    </div>
                    <div class="mess1">
                        <div>上传时间:{{ Time }}</div>
                        <div>整改时间:{{ zgTime }}</div>
                    </div>
                    <img :src="bigimg" alt="" />
                    <img :src="zgbigimg" alt="" />
                    <div class="closeimg" @click="closeimg">X</div>
                </div>
            </div>
            <div class="content1">
                <div class="left1">
                    <div class="tit">本月综合隐患分析</div>
                    <div id="schart1"></div>
                    <div id="schart1-" v-show="schart1show"><img src="../../assets/img/zanwu.png" alt="" /></div>
                </div>
                <div class="left2">
                    <div class="left22">
                        <div class="tit">分包单位隐患分析</div>
                        <div id="schart3"></div>
                        <div id="schart3-" v-show="schart3show"><img src="../../assets/img/zanwu.png" alt="" /></div>
                    </div>
                    <div class="right2">
                        <div class="tit">隐患类型分析</div>
                        <div id="schart5"></div>
                        <div id="schart5-" v-show="schart5show"><img src="../../assets/img/zanwu.png" alt="" /></div>
                    </div>
                </div>
            </div>
            <div class="content2">
                <div class="right1">
                    <div class="tit">隐患详情</div>
                    <div class="xce" v-show="xce"><img src="../../assets/img/zanwu.png" alt="" /></div>
                    <div class="tit-">
                        <div class="tit-2">时间</div>

                        <div class="tit-3">隐患内容</div>
                        <div class="tit-4">照片</div>
                        <div class="tit-1">上传人</div>
                    </div>

                    <div class="cell">
                        <div id="schart15" :style="{ marginTop: marginTop + 'px' }">
                            <li class="li1" v-for="(value, index) in realData" :key="index" @click="handleUpdate(index)">
                                <div class="name2">{{ value.uptime }}</div>
                                <div class="name3">{{ value.description }}</div>
                                <img class="name4" style="height: 140px" :src="value.url" alt="" />

                                <div class="name1">{{ value.staff_name }}</div>
                            </li>
                        </div>
                        <div id="schart155" :style="{ marginTop1: marginTop1 + 'px' }">
                            <li class="li1" v-for="(value, index) in realData" :key="index" @click="handleUpdate(index)">
                                <div class="name2">{{ value.uptime }}</div>
                                <div class="name3">{{ value.description }}</div>
                                <img class="name4" style="height: 140px" :src="value.url" alt="" />

                                <div class="name1">{{ value.staff_name }}</div>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts';
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },

    methods: {
        handleUpdate(index) {
            var me = this;
            var imgindex = this.realData[index].id;
            me.bimgshow = true;
            ajax('qualityshow/FindQualityshowByIdDp', { id: imgindex }, function (data) {
                me.bigimg = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + data.url.substring(1, data.url.indexOf('.') + 4);
                me.zgbigimg = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + data.zg_url.substring(1, data.zg_url.indexOf('.') + 4);

                me.mess = data.description;
                me.zgmess = data.zg_description;
                me.Time = data.plan_time;
                me.zgTime = data.uptime;
            });
        },
        closeimg() {
            this.bimgshow = false;
        },
        fun() {
            var me = this;
            this.marginTop1 = me.datacount * 150 + 818;
            this.marginTop -= 0.1;
            this.marginTop1 -= 0.1;
            var count = me.datacount * 150;
            if (this.marginTop < -count) {
                this.marginTop = 0;
                this.marginTop1 = me.datacount * 150 + 818;
            }
        }
    },

    data() {
        return {
            xce: false,
            schart5show: false,
            schart3show: false,
            schart1show: false,
            zgmess: '',
            Time: '',
            zgTime: '',
            zgbigimg: '',
            mess: '',
            bimgshow: false,
            bigimg: '',
            datacount: '',
            realData: [],
            t: 0,
            marginTop: 0, // 数据的margin-top
            marginTop1: 0,
            options2: [],
            options4: [],
            options3: [],
            options1: [],
            options5: []
        };
    },

    created() {
        // this.timer = setInterval(this.showNotice, 100); //100表示间隔时间，数字越大滚得越快
        this.timer = setInterval(this.fun, 1);
    },
    mounted() {
        var me = this;

        me.section_id = localStorage.getItem('section_id');
        me.station_id = localStorage.getItem('station_id');

        ajax('qualityshow/Select_Qualityshow_Month', { section_id: me.section_id }, function (data) {
            console.log(data, 15415145);
            if (data.length == 0) {
                me.xce = true;
            }

            for (var i = 0; i < data.length; i++) {
                data[i].url = 'http://jjjt.oss-cn-shanghai.aliyuncs.com/' + data[i].url.substring(1, data[i].url.indexOf('.') + 4);
            }

            me.datacount = data.length;

            me.realData = data;
        }),
            ajax('count_App/CountQualityshowByRiskId', { section_id: me.section_id, station_id: me.station_id }, function (data) {
                var data0 = data.data;
                if (data0.length == 0) {
                    me.schart5show = true;
                }
                var data1 = data0.map((a) => a.quality_name);
                var data2 = JSON.parse(
                    JSON.stringify(data0)
                        .replace(/quality_name/g, 'name')
                        .replace(/count/g, 'value')
                );
                console.log(data1, data2, 1111);
                let myChart5 = echarts.init(document.getElementById('schart5'));
                let options5 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#D75DFF', '#FFA235', '#1FC37F', '#008AFF', '#02B4F7'],
                    legend: {
                        textStyle: {
                            color: '#fff',
                            fontWeight: 600
                        },
                        x: 'center', //可设定图例在左、右、居中
                        y: 'top', //可设定图例在上、下、居中
                        padding: [50, 0, 0, 0], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                        data: data1
                    },
                    series: [
                        {
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        textStyle: {
                                            fontWeight: 600,
                                            fontSize: 15 //文字的字体大小
                                        },
                                        // position:'inner',
                                        formatter: ' {c} ({d}%)'
                                    },
                                    labelLine: {
                                        show: true
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        position: 'center',
                                        textStyle: {
                                            fontSize: '17',
                                            fontWeight: 600
                                        }
                                    }
                                }
                            },
                            name: '人数',
                            type: 'pie',
                            radius: '40%',
                            center: ['50%', '60%'],
                            selectedMode: 'single',
                            data: data2,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                myChart5.setOption(options5);
                //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
                window.addEventListener('resize', function () {
                    // myChart1.resize();
                    myChart5.resize();
                });
            });

        ajax('count_PC/RiskshowByMonth', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            var data0 = data;
            if (data0.length == 0) {
                me.schart1show = true;
            }
            var data1 = data0.map((a) => a.month);
            var data2 = JSON.parse(
                JSON.stringify(data0)
                    //.replace(/sub_name/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart1 = echarts.init(document.getElementById('schart1'));
            let options1 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },

                grid: {
                    x: 100,
                    y: 100,
                    x2: 100,
                    y2: 100,
                    borderWidth: 10
                },
                xAxis: {
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#c3dbff', //更改坐标轴文字颜色
                            fontSize: 14 //更改坐标轴文字大小
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#315070' //更改坐标轴颜色
                        }
                    },
                    type: 'category',
                    data: data1
                },

                yAxis: {
                    // splitLine: { show: false }, //取消网格线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ['#315070'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 个', //单位
                        show: true,
                        textStyle: {
                            color: '#c3dbff', //更改坐标轴文字颜色
                            fontSize: 14 //更改坐标轴文字大小
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#315070' //更改坐标轴颜色
                        }
                    },
                    type: 'value'
                },
                series: [
                    {
                        name: '综合隐患',
                        data: data2,
                        color: ['#2B30E7'], //折线条的颜色
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            // type: 'default',
                            // color:'#70eeff'
                            normal: {
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#28C1E6'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#2160B8'
                                    },
                                    {
                                        offset: 1,
                                        color: '#213995'
                                    }
                                ])
                            }
                        }
                    }
                ]
            };

            myChart1.setOption(options1);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart1.resize();
            });
        });

        ajax('count_App/CountQualityshowBySubId', { section_id: me.section_id, station_id: me.station_id }, function (data) {
            var data0 = data.data;
            if (data0.length == 0) {
                me.schart3show = true;
            }
            var data1 = data0.map((a) => a.sub_name);
            var data2 = JSON.parse(
                JSON.stringify(data0)
                    .replace(/sub_name/g, 'name')
                    .replace(/count/g, 'value')
            );
            let myChart3 = echarts.init(document.getElementById('schart3'));
            let option3 = {
                legend: {
                    textStyle: {
                        color: '#fff'
                    },
                    orient: 'vertical',
                    x: 'left', //可设定图例在左、右、居中
                    y: 'center', //可设定图例在上、下、居中
                    padding: [0, 0, 0, 10], //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
                    data: data1
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                color: ['#D75DFF', '#FFA235', '#1FC37F', '#008AFF', '#02B4F7'],
                series: [
                    {
                        name: '分包单位',
                        type: 'pie',
                        center: ['70%', '50%'],
                        radius: ['38%', '55%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontWeight: 200,
                                        fontSize: 15 //文字的字体大小
                                    },
                                    // position:'inner',
                                    formatter: '{d}%'
                                },
                                labelLine: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        data: data2
                    }
                ]
            };

            myChart3.setOption(option3);
            //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
            window.addEventListener('resize', function () {
                // myChart1.resize();
                myChart3.resize();
            });
        });
    }
};
</script>
<style scoped>
.tuceng0 {
    position: absolute;
    top: 0;
    left: 2%;
    width: 96%;
    height: 90%;
    background: rgb(253, 253, 253, 0.9);
    display: flex;
    z-index: 999;
    justify-content: center;
}
.tuceng {
    height: 98%;

    width: 90%;
    z-index: 999;
    /* background:rgb(253, 253, 253); */
    display: flex;
    justify-content: space-around;
    z-index: 9999999999;
}
.tuceng img {
    /* border: 5px solid #fff; */
    margin-top: 155px;
    height: 70%;
}
.mess1 {
    margin-top: 85px;
    width: 100%;
    height: 60px;
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
    justify-content: center;
}
.mess1 div {
    width: 50%;
    height: 60px;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
}
.mess {
    margin-top: 35px;
    width: 100%;
    height: 60px;
    text-align: center;
    font-size: 18px;
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
    justify-content: center;
}
.mess div {
    width: 50%;
    height: 60px;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
}
.closeimg {
    position: absolute;
    right: 5px;
    top: 5px;
    /* float:right; */
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 9999;
}
.li1:nth-child(2n-1) {
    list-style: none;
    color: rgba(215, 244, 255, 1);
    font-size: 18px;
    line-height: 150px;
    width: 100%;
    height: 150px;
    background: rgba(12, 127, 215, 0.2);
}
.li1:nth-child(2n) {
    list-style: none;
    font-size: 18px;
    color: rgba(215, 244, 255, 1);
    line-height: 150px;
    width: 100%;
    height: 150px;
    opacity: 0.7;
    background: rgba(12, 127, 215, 0.2);
}
#schart15 {
    float: left;
    width: 783px;
    /* height: 818px; */
    /* position: absolute;
    top:0; */
    /* background: cyan; */
    /* background: rgb(127, 127, 212); */
}
#schart155 {
    float: left;
    width: 783px;
    /* background: rgb(192, 218, 157); */
    /* height: 818px; */
    /* background: cyan; */
}
.cell {
    float: left;
    width: 783px;
    height: 818px;
    overflow: hidden;
    overflow-y: auto;
    /* background: aquamarine; */
}
.name1,
.name2,
.name3 {
    float: left;
    height: 140px;
    text-align: center;
}
.name1 {
    width: 15%;
}
.name2 {
    width: 15%;
}
.name3 {
    text-align: left;
    margin-top: 50px;
    width: 28%;
    height: 50px;
    padding: 0 6%;
    /* font-size: 15px; */
    line-height: 25px;
}
.name4 {
    float: left;
    margin-top: 5px;
    width: 30%;
}
.tit- {
    margin-top: 8px;
    /* margin-bottom: 5px; */
    width: 783px;
    background: rgba(12, 127, 215, 0.5);

    float: left;
    height: 29px;
}
.tit-1 {
    width: 15%;
    background: rgba(12, 127, 215, 0.2);
    /* background: brown; */
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
    text-align: center;
}
.tit-4 {
    width: 30%;
    background: rgba(12, 127, 215, 0.2);
    /* background: brown; */
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
    text-align: center;
}
.tit-2 {
    width: 15%;
    background: rgba(12, 127, 215, 0.2);
    /* background: blueviolet; */
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
    text-align: center;
}
.tit-3 {
    text-align: center;
    width: 40%;
    background: rgba(12, 127, 215, 0.2);
    /* background: chocolate; */
    float: left;
    height: 29px;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(215, 244, 255, 1);
    line-height: 30px;
}
.tit {
    text-indent: 5px;
    margin-top: 10px;
    width: 94%;
    float: left;
    margin-left: 3%;
    /* font-size:20px; */
    line-height: 30px;
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: rgba(133, 188, 241, 1);
    height: 30px;
}

.conten {
    float: left;
    width: 96%;
    margin-left: 2%;
    height: 880px;
    display: flex;
    justify-content: space-around;
}
.content1 {
    height: 880px;
    width: 977px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.left1 {
    width: 977px;
    height: 527px;
    background: rgba(17, 38, 88, 1);
    border: 2px solid rgba(2, 180, 247, 0.5);
}
#schart1 {
    width: 977px;
    height: 495px;
    float: left;
}
#schart1- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 977px;
    height: 495px;
}
#schart1- img {
    width: 200px;
    height: 200px;
}

.left2 {
    height: 333px;
    width: 981px;
    display: flex;
    justify-content: space-between;
}

.left22 {
    height: 333px;
    width: 500px;
    background: rgba(17, 38, 88, 1);
    border: 2px solid rgba(2, 180, 247, 0.5);
}
#schart3 {
    width: 500px;
    height: 293px;
    float: left;
}
#schart3- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 293px;
}
#schart3- img {
    width: 200px;
    height: 200px;
}

.content2 {
    height: 879px;
    width: 783px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.right1 {
    width: 783px;
    height: 879px;
    background: rgba(17, 38, 88, 1);
    border: 2px solid rgba(2, 180, 247, 0.5);
}
.xce {
    width: 783px;
    height: 879px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.xce img {
    /* margin-top: 30px; */
    width: 200px;
    height: 200px;
}

.right2 {
    float: left;
    height: 333px;
    width: 443px;

    background: rgba(17, 38, 88, 1);
    border: 2px solid rgba(2, 180, 247, 0.5);
}
#schart5 {
    width: 443px;
    height: 303px;
    float: left;
}
#schart5- {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 443px;
    height: 303px;
}
#schart5- img {
    width: 200px;
    height: 200px;
}

div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
div::-webkit-scrollbar-track {
    background: rgb(20, 44, 109);
}
div::-webkit-scrollbar-thumb {
    background: #68b7d6;
    border-radius: 10px;
}
div::-webkit-scrollbar-thumb:hover {
    background: rgb(92, 153, 211);
}
div::-webkit-scrollbar-corner {
    background: #179a16;
}
</style>